<template>

    <el-container v-if="dataInfo.showMenu" class="layout-container-demo" style="height: 100%;">
        <el-aside>
            <el-scrollbar>
                <el-menu :default-openeds="['1', '3']">
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon><Message /></el-icon>信息
                        </template>
                        <el-menu-item-group>
                            <router-link to="/basicmessage">
                                <el-menu-item index="1-1">基本信息</el-menu-item>
                            </router-link>
                            <router-link to="/changemessage">
                                <el-menu-item index="1-2">信息修改</el-menu-item>
                            </router-link>
                            <router-link to="/useraddress">
                                <el-menu-item index="1-3">用户地址簿</el-menu-item>
                            </router-link>
                        </el-menu-item-group>
                    </el-sub-menu>

                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon><Star /></el-icon>收藏
                        </template>

                        <router-link to="/collectShop"><el-menu-item index="2-1">店铺收藏</el-menu-item></router-link>
                        <router-link to="/collectDish"><el-menu-item index="2-2">菜品收藏</el-menu-item></router-link>

                    </el-sub-menu>

                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon><Bell /></el-icon>订单
                        </template>
                        <el-menu-item-group>
                            <router-link to="/allOrder">
                                <el-menu-item index="3-1">全部订单</el-menu-item>
                            </router-link>
                            <router-link to="/waitpay">
                                <el-menu-item index="3-2">待付款</el-menu-item>
                            </router-link>
                            <router-link to="/waitcomplete">
                                <el-menu-item index="3-3">待完成</el-menu-item>
                            </router-link>
                            <router-link to="/waitArrive">
                                <el-menu-item index="3-4">待送达</el-menu-item>
                            </router-link>
                            <router-link to="/waitremark">
                                <el-menu-item index="3-5">待评价</el-menu-item>
                            </router-link>
                            <router-link to="/afterpay">
                                <el-menu-item index="3-6">售后和退款</el-menu-item>
                            </router-link>

                        </el-menu-item-group>

                    </el-sub-menu>
                </el-menu>
            </el-scrollbar>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <div class="toolbar">
                    <router-link to="home">
                        <div class="back">
                            <el-icon><ArrowLeftBold style="color: white; " /></el-icon>
                            <span style="font-size: 20px; color: white">返回首页</span>
                        </div>
                    </router-link>

                    <el-dropdown>
                        <el-icon style="margin-right: 8px; margin-top: 1px"
                        ><setting
                        /></el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <router-link to="login" @click="logout">
                                    <el-dropdown-item>退出登录</el-dropdown-item>
                                </router-link>
                            </el-dropdown-menu>
                            <el-dropdown-menu>
                                <router-link to="resetPassword">
                                    <el-dropdown-item>修改密码</el-dropdown-item>
                                </router-link>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>

            <el-main>
                <!--路由显示区 第一个路由显示区-->
                <router-view/>

            </el-main>
        </el-container>
    </el-container>
    <el-container v-else class="container" >
        <el-main style="padding: 0; margin: 0">
            <!--路由显示区 第一个路由显示区-->
            <router-view style="width: 100%; height: auto; min-height: 100%"/>
        </el-main>
    </el-container>

    <!--路由显示区-->
    <!--<router-view/>-->
</template>
<script setup>
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    import {reactive} from 'vue'
    import {useRouter} from 'vue-router'
    import {useStore} from 'vuex'
    import {ArrowLeftBold} from "@element-plus/icons-vue";


    const store = useStore()
    //const noMenu = ['/login','/register','userregister','/home','/profile']
    const Menu=['/welcome','/basicmessage','/resetPassword','/changemessage','/waitcomplete','/useraddress','/collectShop','/collectDish','/allOrder','/waitpay','/waitArrive','/waitremark','/afterpay']
    const router = useRouter()
    const dataInfo = reactive({
        showMenu: true,
        //defaultOpen: ['1', '2', '3', '4'],
        //currentPath: '/',
    })
    const logout=()=>{
        window.sessionStorage.clear();
    }

    router.beforeEach((to, from, next) => {
        if (to.path == '/login') {
            // 如果路径是 /login 则正常执行
            next()
        } else {
            // console.log("11111")
            // console.log(store.getters.getToken)
            // 如果不是 /login，判断是否有 token
            if (!store.getters.getToken || store.getters.getToken == '') {
                // 如果没有，则跳至登录页面
                //next({path: '/login'})
                next()
            } else {
                // 否则继续执行
                next()
            }
        }
        //dataInfo.showMenu = !noMenu.includes(to.path)
        dataInfo.showMenu = Menu.includes(to.path)
        dataInfo.currentPath = to.path
    })
</script>
<style>
    .back{
        position: absolute;
        left: 0;
        top:20px;
    }
    .layout-container-demo .el-header {
        position: relative;
        background-color: lightskyblue;
        color: var(--el-text-color-primary);
    }
    .layout-container-demo .el-aside {
        color: oldlace;
        background: lightskyblue;
    }
    .layout-container-demo .el-menu {
        background:  lightskyblue;
        border-right: black;
    }
    .layout-container-demo .el-main {
        padding: 0;
    }
    .layout-container-demo .toolbar {

        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        right: 20px;
    }
    .time {
        font-size: 12px;
        color: #999;
    }
    .container {
        height: 100%;
    }

    .demo-type {
        display: -moz-grid;
    }
    .demo-type > div {
        flex: 20;
        text-align: center;
    }

    .demo-type > div:not(:last-child) {
        border-right: 5px solid #b3d4fc;
    }



</style>
